/*
必须在vue.js和axios.min.js之后引入，有依赖关系
全局保留变量名[org_layer,drawer_layer,root_url]
全局保留方法名[create,org_layer_close,drawer_layer_close,open_drawer_layer,open_org_layer,getRootPath]
*/

let root_url = getRootPath();
function getRootPath()
{
    return window.location.protocol + '//' + window.location.host + '/';
}

let org_layer; //组织架构弹窗实例化对象名称
let drawer_layer; //公共抽屉实力化对象名

/*组织架构弹窗关闭方法*/
function org_layer_close()
{
    org_layer.org_layer_close();
}

/*组织架构弹窗关闭方法*/
function drawer_layer_close()
{
    drawer_layer.drawer_layer_close();
}

/*实力化组件专用*/
function create(Component, props)
{
    // 0. 先创建vue实例
    let that=this
    const vm = new Vue({
        render(h) {
            // render方法提供给我们一个h函数，它可以渲染VNode
            return h(Component, {props})
        }
    }).$mount(); // 更新操作

    // 1. 上面vm帮我们创建组件实例
    // 2. 通过$children获取该组件实例
    const comp = vm.$children[0];

    // 3. 追加至body
    document.body.appendChild(vm.$el);

    // 4. 清理函数
    comp.remove = () => {
        document.body.removeChild(vm.$el);
        vm.$destroy();
    };

    // 5. 返回组件实例
    return comp;
}

/*
组织架构弹窗VUE组件
title = 标题名称
url = iframe跳转链接地址
class_name = 弹窗容器class样式名
*/
let org_layer_com = {
    props: {
        title:'',
        url:'',
        class_name:'',
    },
    data:function(){
        return {
            org_visible: true,
            title:this.title,
            url:this.url,
            class_name:this.class_name
        }
    },
    created() {

    },
    methods:{
        org_layer_close:function(){
            this.org_visible = false;
            org_layer.remove();
        }
    },
    template: '<el-dialog :title="title" @close="org_layer_close" :custom-class="class_name" :visible.sync="org_visible">' +
        '<iframe class="open_iframe" style="height: 440px;" :src="url"></iframe>' +
        '</el-dialog>'
};

/*
公共抽屉弹窗
title = 标题名称
url = iframe跳转链接地址
size = 宽度（50%|600px）
w_close = 是否点击遮罩关闭（true|false）
*/
let drawer_layer_com = {
    props: {
        title:'操作',
        url:'',
        size:'50%',
        w_close:false,
    },
    data:function(){
        return {
            drawer: false,
            title:this.title,
            url:this.url,
            size:this.size,
            w_close:this.w_close
        }
    },
    mounted:function(){

        this.drawer = true
    },
    created() {

    },
    methods:{
        drawer_layer_close:function(){
            this.drawer = false;
            drawer_layer.remove();
        }
    },
    template: '<el-drawer :title="title" :wrapperClosable="w_close" @close="drawer_layer_close" :size="size" :visible.sync="drawer">' +
        '<iframe class="open_iframe" style="height: 100%;" :src="url"></iframe>' +
        '</el-drawer>'
};

/*混入当前页面实力化的VUE*/
Vue.mixin({
    components: {

    },
    props: {

    },
    data: function () {
        return {

        }
    },
    watch: {

    },
    filters: {
        /*用于时间戳字段转换成年月日时分秒，例如:{{ item.add_time | time }}*/
        time: function time(value) {
            let now = new Date(value * 1000);
            y = now.getFullYear();
            m = now.getMonth() + 1;
            d = now.getDate();
            return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
        },
        /*用于时间戳字段转换成年月日，例如:{{ item.add_time | date }}*/
        date: function date(value) {
            let d = new Date(parseInt(value) * 1000);
            return (d.getFullYear()) + '-' + (d.getMonth() + 1 > 9 ? d.getMonth() + 1 : '0' + (d.getMonth() + 1)) + '-' + (d.getDate() > 9 ? d.getDate() : '0' + d.getDate());
        }
    },
    methods:{
        /*公共弹窗抽屉，title(头部标题) = 标题，url(网页地址) = 弹窗iframe打开的网址，size(弹窗宽度) = 50%||600px，wc(是否点击遮罩关闭) = false||true*/
        open_drawer_layer(title,url,size,wc)
        {
            if(size==null)
            {
                size='50%';
            }
            if(wc==null)
            {
                wc=true;
            }
            drawer_layer = create(drawer_layer_com, {
                title:title,
                url:url,
                size:size,
                w_close:wc
            });
        },

        /*公共组织架构弹窗选择
        type,弹窗类型[ user = 单用户选择，dept = 部门选择，user_all = 多用户选择，dept_all = 多选部门 ]
        back,回调方法。选择完成后会回调父页面上原生JS的function back_fuc(user_id,username)（非vue内methods）方法，请在使用页面自行构建
        * */
        open_org_layer(type,back)
        {
            let title;
            let url;
            let class_name;
            if(type=='user')
            {
                title =  '用户选择';
                url = root_url + '/host/admin/open_select_user.html?back_function=' + back;
                class_name = 'select_user_box';
            }
            org_layer = create(org_layer_com, {
                org_layer_open:true,
                title:title,
                url:url,
                class_name:class_name,
            });
        },
    }
});

/**
 * 对象转成url参数
 * @param object
 * @returns {string}
 */
function objectToParam(object) {
    let param = "";
    for(let key in object){
        param = param + key+'='+object[key]+"&";
    }
    return param.substring(0,param.length-1);
}